<template>
	<view class="content">
		<view class="swiper2">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner2.png" mode=""></image> </view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner2.png" mode=""></image> </view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner2.png" mode=""></image> </view>
				</swiper-item>
			</swiper>
		</view>
		<view class="xinyiC">
			<p class="xinyi">心意汽车服务</p>
			<p class="border_bottom">营业时间 09:00-18:00</p>
			<p>上海市闸北区金源路327号</p>
			<view class="flex">
				<p>据您约3.26km</p>
				<p> <image src="../../static/adress.png" mode="" style="width: 50rpx;height: 50rpx;margin: 0 30rpx;"></image>
				<image src="../../static/24gf-telephone.png" mode="" style="width: 50rpx;height: 50rpx;margin: 0 30rpx;"></image> </p>
			</view>
		</view>
		<view class="jingXuan">
			<p>精选服务</p>
			<view class="overFlow">
			  <!-- 头部选项卡 -->
			 <view class="xiMei" :class="listIndex==index?'activite':''" @click="checkListIndex(index)" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
			</view>
			<view class="content3">
			   <view class="" v-if="listIndex==0"  v-for="(item,index) in navList2">
			     <view class="overFlow">
			     	<view class="zuo_zuo">
			     		<image :src="item.img" mode="" style="width: 180rpx;height: 160rpx; border-radius: 25rpx;" ></image>
			     	</view>
						<view class="zhong">
							<p class="biaoZhun1">{{item.name}}</p>
							<p class="three_five">{{item.text}}</p>
						</view>
						<view class="you_you">
							<p class="qiangG">{{item.text2}}</p>
						</view>
			     </view>
					 <view class="jiaYouJ">
					 	<p>{{item.text3}}</p>
					 </view>
			   </view>
				 <view class="" v-if="listIndex==1"  v-for="(item,index) in navList2">
				   <view class="overFlow">
				   	<view class="zuo_zuo">
				   		<image :src="item.img" mode="" style="width: 180rpx;height: 160rpx; border-radius: 25rpx;" ></image>
				   	</view>
				 						<view class="zhong">
				 							<p class="biaoZhun1">{{item.name}}1</p>
				 							<p class="three_five">{{item.text}}</p>
				 						</view>
				 						<view class="you_you">
				 							<p class="qiangG">{{item.text2}}</p>
				 						</view>
				   </view>
				 					 <view class="jiaYouJ">
				 					 	<p>{{item.text3}}</p>
				 					 </view>
				 </view>
			</view>
		</view>
		<view class="shuoMing">
			<p>使用说明</p>
			<p> <image src="../../static/odf.png" mode="" style="width: 100%;height: 280rpx;"></image> </p>
		</view>
	</view>
</template>

<script>
	export default{
	  data(){
	    return{
	      navList:[{name:"洗车",id:'1'},{name:"美容",id:'2'}],
				navList2:[
					{name:'标准洗车-五座轿车',text:'￥35',img:'../../static/c3.jpg',text2:'抢购',text3:'加油金可抵5元'},
					{name:'标准洗车-五座轿车',text:'￥35',img:'../../static/c3.jpg',text2:'抢购',text3:'加油金可抵5元'}
				],
	      listIndex:0
	    }
	  },
	  methods:{
	    checkListIndex(index){
	      this.listIndex=index;
	    }
	  }
	}
</script>

<style>
	.activite{color: red;background-color: #ccc;}
	.content{position: relative;}
	p{margin: 10rpx 0;}
	.flex{display: flex;justify-content: space-between;}
	image{width: 100%;}
	.xinyiC{
		width: 90%;padding: 20rpx;background-color: #fff;
		border-radius: 25rpx;position: absolute;top: 200rpx;right: 18rpx;
		}
	.xinyi{font-size: 50rpx;font-weight: bold;}
	.border_bottom{border-bottom: 1px solid #ccc;padding-bottom: 20rpx;}
	.jingXuan{width: 90%;padding: 20rpx;background-color: #fff;
		border-radius: 25rpx;position: absolute;top: 560rpx;right: 18rpx;}
	.xiMei{
			font-size: 35rpx;width: 120rpx;background-color: #fff;
			border-radius: 100rpx;text-align: center;float: left;margin: 0 20rpx;
			}
	.overFlow{overflow: hidden;}
	.zuo_zuo{float: left;margin-top: 20rpx;}
	.zhong{float: left;margin-left: 10rpx;}
	.you_you{float: right;margin-top: 50rpx;}
	.shuoMing{width: 90%;padding: 20rpx;background-color: #fff;margin: 20rpx 0;
		border-radius: 25rpx;position: absolute;top: 1200rpx;right: 18rpx;}
	.qiangG{width: 160rpx;background-color: #0065d9;height: 40rpx;padding: 10rpx 0; text-align: center;border-radius: 160rpx;}
	.biaoZhun1{font-size: 30rpx;font-weight: bold;margin-top: 20rpx;}
	.three_five{line-height: 60rpx;color: red;font-size: 35rpx;}
	.jiaYouJ{margin: 0 190rpx;border-radius: 15rpx;border: 1px solid red;text-align: center;font-size: 25rpx;color: red;}
</style>